<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jsp:include flush="true" page="../jsp/copyright.jsp"></jsp:include>
<link href="css/index/login_regist.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="js/jquery/jquery.metadata.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery/jquery.form.js"></script>
<script type="text/javascript" src="js/calendar/Calendar.js"></script>
<link type="text/css" href="css/blue/blue.css" rel="Stylesheet" id="calCss" />
<script type="text/javascript" language="javascript"> 
//普通日历
$(function(){
	$(document).ready(function(){
		$('#txtloginname').focus();
	})
	//datepicker
	$("#txtBirthday").datepicker();
})
</script>
<script language='javascript'>
// JavaScript Document
$(function(){
	$("#form_regist input[@type='text'],#form1 input[@type='password'],textarea").addClass('input_onFocus');
	$("#form_regist").validate({
		errorClass: "wrong",
		rules: {
			txtloginname: {
				required:true,
				minlength:function(){
					if(hanZiNum($('#txtloginname').val()) > 0){//有汉字的时候
						return 2;
					}else{
						return 3;
					}
				},
				maxlength:function(){
					return 15-hanZiNum($('#txtloginname').val())*3+hanZiNum($('#txtloginname').val());
				}
			},
			txtPassword: {required:true,minlength:6,maxlength:16},
			txtcheckpassword: {required:true,minlength:6,maxlength:16,equalTo:'#txtPassword'},
			txtemail: {required:true,email:true},
			txtecheckmail: {required:true,email:true,equalTo:'#txtemail'},
			code: {required:true,minlength:4,maxlength:4},
			txtZip: {number: true,min:100000,max:999999},
			txtMobilephone: {number: true,min:10000000000,max:19999999999},
			txtPhone: {number: true},
			txtOtherphone: {number: true},
			txtQQ: {number: true}
		},
		messages: {
			txtloginname: {required: "用户名不能为空!",minlength: "用户名长度至少是3!",maxlength: "用户名超过长度!"},
			txtPassword: {required: "密码不能为空!",minlength: "密码长度至少是6位!",maxlength: "密码长度最长是16位!"},
			txtcheckpassword: {required: "重复密码不能为空!",minlength: "重复密码长度至少是6位!",	maxlength: "重复密码长度最长是16位!",equalTo:"两次输入的密码不相同!"},
			txtemail: {required: "email地址不能为空!",email: "请输入正确格式的email!"},
			txtecheckmail: {required: "email地址不能为空!",email: "请输入正确格式的email!",equalTo:"两次输入的邮箱地址不相同!"},
			code: {required: "验证码不能为空!",minlength:"验证码长度不正确!",maxlength:"验证码长度不正确!"},
			txtZip: {number: "邮编应该为数字!",min:"邮编格式有误!",max:"邮编格式有误!"},
			txtMobilephone: {number: "手机号码应该为数字!",min:"手机格式有误!",max:"手机格式有误!"},
			txtPhone: {number: "电话号码应该为数字!"},
			txtOtherphone: {number: "电话号码应该为数字!"},
			txtQQ: {number: "QQ应该为数字!!"}
		}
	});
})

//检测用户名是否可用
function sub_name(){
	var str_length = hanZiNum($('#txtloginname').val())*3+$('#txtloginname').val().length-hanZiNum($('#txtloginname').val());
	if(str_length >= 3 && str_length <= 15){
		$.ajax({
			url: "user!toReg.do?",
			data: 'action=checkUserName&username='+escape($('#txtloginname').val()),
			type:'post',
			dataType:"html",
			success: function(data){
				if ('0'==data) {/*没有被注册*/
					$("#loginname_sign").html("恭喜您，用户名可以使用");
				}else if ('1'==data) {/*已经被注册*/
					$("loginname_sign")
					.addClass("wrong").html("用户名已被注册");
				}else {/*条件不对*/
					$("#loginname_sign").html(data);
				}
			}
		});
		$("#loginname_sign").css('display',"");
	}
}

// 汉字数目
function hanZiNum(str){
	var arr = str.match(/[^\x00-\xff]/ig);
	return arr == null ? 0 : arr.length;
}


//检测密码安全等级
function checkPassword(pwd){

	/*$('#pwdLow').addClass('pwd-strength-box');
	$('#pwdMed').addClass('pwd-strength-box');
	$('#pwdHi').addClass('pwd-strength-box');*/


	var sRe=[/[a-zA-Z]/g,/\d/g,/[^a-zA-Z0-9]/g];
	var sLe=[1,2,5];
	var sFa=[0,0,10,20];
	var iKn=0;
	var iSt=0;
	for(i=0;i<sRe.length;i++) {
		var cMa=pwd.match(sRe[i]);
		if(cMa!=null) {
			iSt+=cMa.length*sLe[i];
			iKn++;
		}
	}
	iSt+=sFa[iKn];

	if(iSt == 0){
		$('#pwdLow').removeClass('pwd-strength-box-low');
		$('#pwdMed').removeClass('pwd-strength-box-med');
		$('#pwdHi').removeClass('pwd-strength-box-hi');
	}else if(iSt>=20 && iSt<30){
		$('#pwdLow').addClass('pwd-strength-box-low');
		$('#pwdMed').addClass('pwd-strength-box-med');
		$('#pwdHi').removeClass('pwd-strength-box-hi');
	}else if(iSt>=30){
		$('#pwdLow').addClass('pwd-strength-box-low');
		$('#pwdMed').addClass('pwd-strength-box-med');
		$('#pwdHi').addClass('pwd-strength-box-hi');
	}else{
		$('#pwdLow').addClass('pwd-strength-box-low');
		$('#pwdMed').removeClass('pwd-strength-box-med');
		$('#pwdHi').removeClass('pwd-strength-box-hi');
	}

}

//检测验证码是否正确
function sub_code(){
	var str_length = $('#code').val().length;
	if(str_length == 4){
		$.ajax({
			url: "user!toReg.do?",
			data: 'action=checkCode&inputCode='+escape($('#code').val()),
			type:'post',
			dataType:"html",
			success: function(data){
				if ('0'==data) {/*验证码通过*/
					$("#code_sign").html("验证码正确");
				}else if ('1'==data) {/*验证码不通过*/
					$("#code_sign").html("验证码错误");
				}else {/*条件不对*/
					$("#code_sign").html(data);
				}
			}
		});
		$("#code_sign").css('display',"");
	}
}

</script></head>
<body>
<link href="css/index/header_new.css" rel="stylesheet" type="text/css" />
<link href="css/index/default_new.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){  
        $(".select_lang h3").mouseover(function(){    
                $(this).addClass("over");}).mouseout(function(){ 
                $(this).removeClass("over");})
		$(".select_lang h3").hover(function()
		{
			$(this).next().css("display","block");
		},
		function()
		{
			$(this).next().css("display","none");	
		});
		$(".select_lang ul").hover(function()
		{
			$(this).css("display","block");
		},
		function()
		{
			$(this).css("display","none");	
		})
});
</script>
  <jsp:include flush="true" page="../jsp/top.jsp"></jsp:include>
    <div class="clear"></div>
      <div class="nav_part">
        <div class="nav_side_left"></div>
        <div class="nav_side_right"></div>
      </div>
    </div>
  </div>
</div>
  <div id="container_regist" style="height:auto">
  <b></b>
  <div class="biaoti"><img src="images/blue/ico2.gif" /> <a href="http://localhost:8888">首页</a> > <a href="home/member.php?action=regist">注册</a></div>
  <div class="homeform"><!-- 登陆页面整体内容 -->
  <div id="loginleft" ><!-- 左侧登录框 --><span id="png_zi"><img src="images/blue/zi2.jpg" /></span>
  <form action="user!toReg.do?action=toRegister" method="post" name="form1" id="form_regist" style="height:auto" ><!-- 注册输入信息 -->
  <input type="hidden" name="seride_token" value="93844b05">
  
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="regist_left"> 以下均为必填项</td>
  </tr>
  </table>
	<table cellpadding="0" cellspacing="1" bgcolor="#ffffff" class="table_style">
      <tr>
        <th align="right" bgcolor="#E6F2FB"><div for='txtloginname'>会员名
          <!-- 会员名 --></div></th>
        <td align="center" valign="middle" bgcolor="#F3F9FC">
	        <input name="txtloginname" class="yanzheng_new" type="text" onkeyup="$('#loginname_sign').css('display','none');" onblur="sub_name();" id="txtloginname" value="" />
	        <label style="display:none" for="txtloginname"  class="wrong" metaDone="true" generated="true"></label>
			<label id="loginname_sign" style="display:none" class="gongxi" metaDone="true" generated="true"></label>
	        <!-- 查看会员名是否可用 -->
        </td>
        <td bgcolor="#F3F9FC">
        	<div class="table_right">
        	3-15个字符(包括小写字母、数字、下划线、中文)，最多使用5个汉字，推荐使用中文会员名。一旦注册成功会员名不能修改。
          	<!-- 5-20个字符(包括小写字母、数字、下划线、中文)，一个汉字为两个字符，推荐使用中文会员名。一旦注册成功会员名不能修改。<a href="#" target="_blank">怎样输入会员名？</a> -->
			</div>
		</td>
      </tr>
      <tr>
        <th align="right" bgcolor="#E6F2FB">
	        <div for='txtPassword'>
	        	密码
	          <!-- 密码 -->
	        </div>
        </th>
        <td align="center" valign="middle" bgcolor="#F3F9FC">
	        <input name="txtPassword" class="yanzheng_new" type="password" id="txtPassword" onkeyup="checkPassword(this.value);" />
	        <label style="display:none" for="txtPassword" class="wrong" metaDone="true" generated="true"></label>
        </td>
        <td>
			<div class="table_right">
				<ul>
					<li class="pwd-strength-box" id="pwdLow" >低</li>
					<li class="pwd-strength-box" id="pwdMed" >中</li>
					<li class="pwd-strength-box" id="pwdHi">高</li>
				</ul>
			</div>
		<div class="table_right">
			<div for='txtpassword'>
				密码由6-16个字符组成，请使用英文字母加数字或符号的组合密码，不能单独使用英文字母、数字或符号作为您的密码。
	          	<!-- 密码由6-16个字符组成，请使用英文字母加数字或符号的组合密码，不能单独使用英文字母、数字或符号作为您的密码。<a href="#" target="_blank">怎样设置安全性高的密码？</a> -->
	        </div>
        </div>
        </td>
      </tr>
      <tr>
        <th align="right" bgcolor="#E6F2FB">
	        <div for='txtcheckpassword'>
	        	再输入一遍密码
	          	<!-- 再输入一遍密码 -->
	        </div>
        </th>
        <td align="center" valign="middle" bgcolor="#F3F9FC">
	        <input name="txtcheckpassword" class="yanzheng_new" type="password" id="txtcheckpassword" />
	        <label style="display:none" for="txtcheckpassword" class="wrong" metaDone="true" generated="true"></label>
        </td>
        <td bgcolor="#F3F9FC">
	        <div class="table_right">
		        <div for='txtcheckpassword'>
		        	请再输入一遍您上面输入的密码。
		          	<!-- 请再输入一遍您上面输入的密码。 -->
		        </div>
	        </div>
        </td>
      </tr>
    </table>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td class="regist_left">
	    	请填写常用的电子邮件地址，<!-- 请填写常用的电子邮件地址，需要您通过邮件完成注册。 -->
	    </td>
	  </tr>
	</table>
    <table cellpadding="0" cellspacing="1" bgcolor="#FFFFFF" class="table_style">
      <tr>
        <th align="right" bgcolor="#E6F2FB">
	        <div for='txtemail'>
	        	电子邮箱
	            <!-- 电子邮件 -->
	        </div>
        </th>
        <td align="center" valign="middle" bgcolor="#F3F9FC">
	        <input name="txtemail" type="text" id="txtemail" class="yanzheng_new"  value="" />
	        <label style="display:none" for="txtemail" class="wrong" metadone="true" generated="true"></label>
        </td>
        <td bgcolor="#F3F9FC">
	        <div class="table_right">
		        <div for='label'>
		        	没有电子邮件？推荐使用搜狐邮箱和网易邮箱。
		            <!-- 没有电子邮件？那你去死吧！ -->
		        </div>
	        </div>
        </td>
      </tr>
      <tr>
        <th align="right" bgcolor="#E6F2FB">
	        <div for='txtecheckmail'>
	        	再输入一遍电子邮箱
	          	<!-- 再输入一遍电子邮件 -->
	        </div>
        </th>
        <td align="center" valign="middle" bgcolor="#F3F9FC">
	        <input name="txtecheckmail"class="yanzheng_new" type="text" id="txtecheckmail" value="" />
	        <label style="display:none" for="txtecheckmail" class="wrong" metaDone="true" generated="true"></label>
        </td>
        <td bgcolor="#F3F9FC">
	        <div class="table_right">
	        	<div for='txtecheckmail'>
		        	请再输入一遍上面输入的电子邮件地址。
		          	<!-- 请再输入一遍上面输入的电子邮件地址。 -->
		        </div>
	        </div>
        </td>
      </tr>
      <tr>
        <th align="right" bgcolor="#E6F2FB">
	        <div for='code'>
	        	校验码
	          	<!-- 校验码 -->
	        </div>
        </th>
        <td align="center" valign="middle" bgcolor="#F3F9FC">
	        <input name="code" type="text" id="code" class="yanzheng_new"  onkeyup="$('#code_sign').css('display','none');" onblur="sub_code();" />
	        <label style="display:none" for="code" class="wrong" metaDone="true" generated="true"></label>
			<label id="code_sign" style="display:none" class="gongxi" metaDone="true" generated="true"></label>
	    </td>
        <td bgcolor="#F3F9FC"><div class="table_right"><div for='code'><a href="javascript:;" onclick="javascript:document.getElementById('codeimage').src='common!createVCode.do?' + Math.random();"><img src="common!createVCode.do	" name="codeimage" border="0" id="codeimage" style="vertical-align:middle; margin-right:10px" title="点击可更换验证码" onclick="this.src='../classes/libraries/code.php?' + Math.random()" />看不清楚？换个图片</a></div></div></td>
      </tr>
    </table>
	<!--更多资料-->
    <div style=" line-height:30px;"><input type="checkbox" name="more_info" id="more_info" onclick="if(this.checked == true){$('#more_table').css('display','block');}else{$('#more_table').css('display','none');}" value="1" /><label style="padding-left:3px;padding-left:1px\9; vertical-align:2px;font-weight:700;" for="more_info">填写更多资料</label></div>
      <table cellpadding="0" cellspacing="1" bgcolor="#ffffff" id="more_table" class="table_style-l" style="display:none">
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtTruename'>真实姓名</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC"><input name="txtTruename" class="yanzheng_new" type="text" id="txtTruename" /></td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtBirthday'>出生日期</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC"><input name="txtBirthday" class="yanzheng_new" type="text" id="txtBirthday" /></td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='gender'>性别</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC">
	      		<input id="gender_m" type="radio" value="m" name="gender" checked/>
	      		<label style="padding-left:3px;padding-left:1px\9; vertical-align:2px;" for="gender_m">男</label>
	      		<input id="gender_f" type="radio" value="f" name="gender" />
	      		<label style="padding-left:3px;padding-left:1px\9; vertical-align:2px;" for="gender_f">女</label>
	      	</td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtZip'>邮编</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC">
		      	<input name="txtZip" class="yanzheng_new" type="text" id="txtZip" maxlength="6" size="6" />
		      	<label style="display:none;color:#FF0000;" for="txtZip" class="error" metaDone="true" generated="true"></label>
	      	</td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtMobilephone'>移动电话</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC">
		      	<input name="txtMobilephone" class="yanzheng_new" type="text" id="txtMobilephone" maxlength="11" />
		      	<label style="display:none;color:#FF0000;" for="txtMobilephone" class="error" metaDone="true" generated="true"></label>
	      	</td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtPhone'>固定电话</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC">
	      		<input name="txtPhone" class="yanzheng_new" type="text" id="txtPhone" />
	      		<label style="display:none;color:#FF0000;" for="txtPhone" class="error" metaDone="true" generated="true"></label>
	      	</td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtOtherphone'>其他联系电话</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC">
		      	<input name="txtOtherphone" class="yanzheng_new" type="text" id="txtOtherphone" />
		      	<label style="display:none;color:#FF0000;" for="txtOtherphone" class="error" metaDone="true" generated="true"></label>
	      	</td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='area_id'>地址</div></th>
	      	<td  align="center" valign="middle" bgcolor="#F3F9FC" colspan="2">
	      	<input type="hidden" name="area_id" id="area_id" value="" />
	      	<select id="c1" class="searchformselect" name="c1" style="width: 120px">
				<option valus="" selected></option>
								<option  value="1||1">天津</option>
							</select>
			<select class="searchformselect" id="c2" style="width: 120px" name="c2">
				<option valus="" selected></option>
			</select>
			<select class="searchformselect" id="c3" style="width: 120px" name="c3">
				<option valus="" selected></option>
			</select>
			<select class="searchformselect" id="c4" style="width: 120px" name="c4">
				<option valus="" selected></option>
			</select>
	      	</td>
	      	
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtAddress'>详细地址</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC"><input name="txtAddress" class="yanzheng_new" type="text" id="txtAddress" /></td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtQQ'>QQ</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC"><input name="txtQQ" class="yanzheng_new" type="text" id="txtQQ" /></td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtMSN'>MSN</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC"><input name="txtMSN" class="yanzheng_new" type="text" id="txtMSN" /></td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtSKYPE'>SKYPE</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC"><input name="txtSKYPE" class="yanzheng_new" type="text" id="txtSKYPE" /></td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
	      <tr>
	      	<th width="237" height="45" align="right" bgcolor="#E6F2FB"><div for='txtTAOBAO'>TAOBAO</div></th>
	      	<td width="200" align="center" valign="middle" bgcolor="#F3F9FC"><input name="txtTAOBAO" class="yanzheng_new" type="text" id="txtTAOBAO" /></td>
	      	<td width="342" height="45" bgcolor="#F3F9FC">&nbsp;</td>
	      </tr>
      </table>
    <div style="display:block; width:100px; margin:auto; line-height:50px; height:50px; padding-top:10px">
	   <ul id="quick_menu">
		  <li>
		  	<input type="submit" class="bg_input" value="提&nbsp;&nbsp;交" />
		  </li>
       </ul>
	</div>
    <!-- <input name="sub_input" type="submit" id="sub_input" value="同意以下服务条款,提交信息注册会员." /> -->
	<!-- <input type="button" value="提交" onclick="ajax_code();" />
    同意以下服务条款,提交信息注册会员 -->
    <input type="hidden" name="refer_url" value="home/member.php?action=registsuccess" />
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	    <td class="regist_left"> 用户注册协议    <!-- 请填写常用的电子邮件地址，需要您通过邮件完成注册。 --></td>
	  </tr>
	</table>
	 <div class="ContractContent">  </div>
  </form>
 </div>
 </div>
  <!-- <div id="FromReadContract">   服务协议 -->	
  <!--   <h3>阅读
      阅读$site_name服务协议	
	    
    </h3>
  </div> -->
  <i></i>
</div>
<jsp:include flush="true" page="../jsp/bottom.jsp"></jsp:include>
</body>
</html>
<script>
function tonext(whos) {
	$(whos).change(
	function(){
		var valarray=$(this).val().split('||');
		$('#area_id').val(valarray[0]);
		if (valarray[1]=='1') {
			$(this).next().attr('disabled','true').html('<option value="" selected="selected">数据正在加载中……</option>');
			$.get(
			'../home/tohtml.php',
			{action:'get_area',id:valarray[0],random_number:Math.random()},
			function(data){
				DataArray = data.split("|||");
				var a='';
				for (var i = 0; i<DataArray.length-1; i++) {
					att=DataArray[i].split("||");
					id=att[0];
					cla=att[2];
					a+='<option value="'+id+'||'+cla+'">'+att[1]+((cla=='1')?' ->':'')+'</option>';
				}

				$(whos).next().removeAttr('disabled').html('<option value="" selected="selected"></option>'+a).nextAll().html('');
				tonext($(whos).next());
			}
			)
		} else {
			$(whos).nextAll().html('').attr('disabled','true');
		};
	}
	)
};
$().ready(function() {
	tonext('#c1');
});
</script>